<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">获取歌手信息</button>
    <div id="app">
        <ul id="list"></ul>
    </div>
    <script>
        let btn = document.getElementById('btn')
        btn.addEventListener('click',()=>{
           getData()
        })
        function getData(){
            const xhr = new XMLHttpRequest()//创建异步对象
            xhr.open('GET','https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer')//准备请求的参数
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status === 200){//请求成功
                    let data =JSON.parse(xhr.responseText)
                    console.log(data.data);
                    renderList(data.data);
                }
            }
        }
        function renderList(arr){
            let app = document.getElementById('list')
            for (let i = 0; i < arr.length; i++) {
                let item = arr[i]
                let li = document.createElement('li')
                li.innerText=`${item.name}--${item.songsCount}`
                list.appendChild(li)
            }
        }
    </script>
</body>
</html>